<template>
  <div class="section">
    <div class="section-header">
      <div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <h2 class="section-title">{{ props.title }}</h2>
          <slot name="header-afterfix"></slot>
        </div>
        <div class="section-subtitle">{{ props.desc }}</div>
      </div>
      <div class="refresh-icon"></div>
    </div>
    <div
      class="item"
      v-if="props.items.length"
      v-for="(child, index) in props.items"
      @click="emit('click', child)"
    >
      <div class="item-icon">
        <el-image
          fit="cover"
          :src="imagePrefix + child.avatar"
          :preview-src-list="[imagePrefix + child.avatar]"
          :initial-index="index"
          class="w-40 h-40 border-radius-s"
        >
          <template #error>
            <text-avatar
              :text="child[props.attr]"
              :width="40"
              style="border-radius: 4px"
            />
          </template>
        </el-image>
      </div>
      <div class="item-content">
        <div class="item-title">{{ child[props.attr] }}</div>
        <div class="item-desc">
          <div class="text-ellipsis title" :title="child[props.descLabel]">
            <el-text class="">{{ child[props.descLabel] }}</el-text>
          </div>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无数据" />
  </div>
</template>
<script setup lang="ts">
const imagePrefix = import.meta.env.VITE_IMAGE_SUFFIX
import TextAvatar from '@/components/text-avatar/index.vue'
import { PropType } from 'vue'
const emit = defineEmits(['click'])
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  desc: {
    type: String,
    default: '',
  },
  items: {
    type: Array as PropType<any>,
    default: () => [],
  },
  attr: {
    type: String,
    default: 'title',
  },
  descLabel: {
    type: String,
    default: 'introduction',
  },
})
</script>
<style scoped lang="scss">
.section {
  background: rgba($color: #f8f9fa, $alpha: 0.5);
  border-radius: 15px;
  padding: 20px;
  min-width: 200px;
  min-height: 200px;
  max-height: 400px;
  flex-shrink: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.section-subtitle {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.refresh-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  color: #999;
}

.item {
  display: flex;
  align-items: center;

  gap: 12px;
  padding: 15px;
  background: rgba($color: #fff, $alpha: 0.7);
  border-radius: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  &:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease-in-out;
    // border: 1px solid #615ced;
  }
}

.item:last-child {
  margin-bottom: 0;
}

.item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.item-content {
  width: calc(100% - 40px);
}

.item-title {
  font-size: 14px;
  margin-bottom: 4px;
  font-weight: 500;
}

.item-desc {
  font-size: 12px;
  color: #999;
}
</style>
